<!--阿里云配置-->
<template>
  <div class="ele-body">
    <el-row :gutter="15">
      <el-col :span="24">
        <el-card shadow="never" body-style="padding: 0;">
          <el-tabs v-model="active" class="user-info-tabs">
            <el-tab-pane label="阿里云配置" name="info">
              <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="180px"
                style="max-width: 650px; padding: 34px 20px 0 20px"
                @keyup.enter.native="save"
                @submit.native.prevent
              >
                <el-form-item label="阿里云accessKey:" prop="accessKeyId">
                  <el-input
                    v-model="form.accessKeyId"
                    placeholder="请输入阿里云accessKey"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="阿里云accessKeySecret:" prop="accessKeySecret">
                  <el-input
                    show-password
                    v-model="form.accessKeySecret"
                    placeholder="请输入阿里云accessKeySecret"
                    clearable
                  />
                </el-form-item>

                <el-form-item label="bucket选择:" prop="bucket">
                  <el-input
                    v-model="form.bucket"
                    placeholder="请输入bucket"
                    clearable
                  />
                </el-form-item>

                <el-form-item label="地域节点:" prop="endpoint">
                  <el-input
                    v-model="form.endpoint"
                    placeholder="请输入地域节点"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="区域id:" prop="regionId">
                  <el-input
                    v-model="form.regionId"
                    placeholder="请输入区域id"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="url:" prop="domainName">
                  <el-input
                    v-model="form.domainName"
                    placeholder="请输入url"
                    clearable
                  />
                </el-form-item>
                <!-- 阿里云数字人 start-->
                <el-form-item label="阿里云数字人tenantId:" prop="tenantId">
                  <el-input
                    v-model="form.tenantId"
                    placeholder="请输入阿里云数字人tenantId"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="阿里云数字人appId:" prop="appId">
                  <el-input
                    v-model="form.appId"
                    placeholder="请输入阿里云数字人appId"
                    clearable
                  />
                </el-form-item>
                <!-- 阿里云数字人 end -->

                <el-form-item>
                  <el-button type="primary" :loading="loading" @click="save">
                    保存更改
                  </el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {saveOss, queryOss} from '@/api/agent/pointAllocation'
  import {updateDy} from "@/api/merchantAccount";
  export default {
    name: "index",
    data() {
      return {
        loading:false,
        // tab页选中
        active: 'info',
        form:{
          id:'',  // oemId
          username:this.$store.state.user.info.username,  // oemid用户名
        },
        // 表单验证规则
        rules: {
          endpoint: [
            {
              required: true,
              message: '请输入地域节点',
              trigger: 'blur'
            }
          ],
          bucket: [
            {
              required: true,
              message: '请输入bucket名称',
              trigger: 'blur'
            }
          ],
          accessKeyId: [
            {
              required: true,
              message: '请输入阿里云accessKey',
              trigger: 'blur'
            }
          ],
          accessKeySecret: [
            {
              required: true,
              message: '请输入阿里云accessKeySecret',
              trigger: 'blur'
            }
          ],
          regionId: [
            {
              required: true,
              message: '请输入区域id',
              trigger: 'blur'
            }
          ],
          domainName: [
            {
              required: true,
              message: '请输入域名',
              trigger: 'blur'
            }
          ],

          tenantId: [
            {
              required: true,
              message: '请输入阿里云数字人tenantId',
              trigger: 'blur'
            },
            {
              pattern:/^[0-9a-zA-Z]+$/,
              message: '只能输入数字或字母'
            }
          ],
          appId: [
            {
              required: true,
              message: '请输入阿里云数字人appId',
              trigger: 'blur'
            },
            {
              pattern:/^[0-9a-zA-Z]+$/,
              message: '只能输入数字或字母'
            }
          ],



        }
      }
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created(){
      this.init()
    },
    methods:{
      init(){
        queryOss({
          username:this.$store.state.user.info.username  // oemid用户名
        })
          .then((data) => {
            this.form=data
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      save(){
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          this.loading = true;
          saveOss(this.form)
            .then((msg) => {
              this.$message.success('保存成功')
              this.init()
              this.loading = false;
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e);
            });
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  /* tab 页签 */
  .user-info-tabs {
    :deep(.el-tabs__nav-wrap) {
      padding-left: 24px;
    }

    :deep(.el-tabs__item) {
      height: 50px;
      line-height: 50px;
      font-size: 15px;
    }
  }
</style>
